<template>
    <hl-page title="登录" :hidden-back="false" :hidden-tab-bar="true">
        <div class="login-panel" slot="content">
            <section class="login" id="login">
                <div class="logo">
                    <p><img src="../assets/logo.png"/></p>
                    <!--<p class="logo-text">阿玛迪斯</p>-->
                </div>
                <form ref="form" action="http://amds.test/login" method="post">
                    <div class="form-cell">
                        <p>
                            <i class="amds icon-user"></i>
                            <input type="tel" name="username" v-model="username" placeholder="用户名"/>
                        </p>
                    </div>
                    <div class="form-cell">
                        <p>
                            <i class="amds icon-mima"></i>
                            <input type="password" name="password" v-model="password" placeholder="密码"/>
                        </p>
                    </div>
                    <div class="btn-group" style="margin-top: 24px">
                        <cube-button @click="submit" :primary="true">登录</cube-button>
                        <cube-button @click="$router.push('/register')" :outline="true" style="margin-top: 10px">注册
                        </cube-button>
                    </div>
                    <router-link class="find-pass" :to="{path:'/find'}">忘记密码？</router-link>
                </form>
            </section>
        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";

    export default {
        components: {HlPage},
        name: "login",
        data() {
            return {
                username: '',
                password: "",
                options: [
                    "86"
                ],
                value: "86"
            }
        },
        methods: {
            submit() {
                const toast = this.$createToast({
                    time: 0,
                    txt: '正在登录'
                })
                toast.show();
                this.$post('/api/login', {username: this.username, password: this.password}).then((res) => {
                    toast.hide();
                    this.$createToast({
                        txt: res.msg,
                        type: 'correct'
                    }).show();
                    let {token, user} = res.data;
                    this.$store.commit("updateToken", {token: token});
                    this.$store.commit("updateUser", {user: user})
                    setTimeout(() => {
                        this.$router.push('/');
                    }, 1500)
                }).catch((error) => {
                    this.$createToast({
                        txt: error,
                        type: 'error'
                    }).show();
                    console.log(error);
                })
            }
        }
    }
</script>

<style lang="less">
    .login-panel {
        background: #fff;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 10000;
        section {
            padding: 94px 0px 120px 0px;
            box-sizing: border-box;
            .logo {
                height: 320px;
                overflow: hidden;
                flex-wrap: wrap;
                text-align: center;
                .logo-text {
                    font-size: 16PX;
                }
                img {
                    height: 240px;
                    width: 240px;
                }
                p {
                    margin: 20px 0;
                }
            }
        }
        .form-cell {
            height: 60px;
            padding: 12px 0;
            margin: 0 12px;
            border-bottom: 1PX solid #ddd;
            display: flex;
            flex-direction: row;
            align-items: center;
            > p {
                height: 60px;
                margin-left: 40px;
                margin-right: 40px;
                display: flex;
                flex: 1;
                font-size: 14PX;
                justify-content: flex-start;
                align-items: center;
                .amds {
                    font-size: 48px;
                    color: #e64e4d;
                }
                input {
                    flex: 1;
                    border: none;
                    outline: none;
                    margin-left: 20px;
                }
            }
        }
        .btn-group {
            margin-left: 24px;
            margin-right: 24px;
            button {

            }
        }
        .find-pass {
            color: #e64e4d;
            text-align: center;
            font-size: 12PX;
            display: block;
            margin: auto;
            margin-top: 12px;
            line-height: 24PX;
        }
        .btn {
            width: 100%;
            height: 88px;
            background: #888888;
            line-height: 88px;
            border-radius: 30px;
            color: #ffffff;
            font-size: 16PX;
            outline: none;
            border: solid 1PX transparent;
            display: block;
            text-align: center;
            margin-bottom: 30px;

            &.btn-primary {
                background: #E4393C;
                color: white;
            }

            &.btn-outline {
                background: transparent;
                border: solid 1PX #e0e0e0;
                color: #888888;
            }
        }
    }
</style>